<template>
  <my-map
    :minZoom="15"
    :maxZoom="19"
    projection="EPSG:3857"
    :adapter="adapter"
    :zoom="15"
    :center="center"
    :extent="extent"
  >
    <my-map-placement placement="left-top" style="padding: 10px;">
      <el-button size="small" @click="clear">清空</el-button>
    </my-map-placement>
    <my-map-icon
      v-for="(i, index) in locaList"
      :key="index"
      :position="i.geometry.coordinates"
      :size="40"
      :theme="i.color"
      name="el-icon-location"
    ></my-map-icon>
    <my-map-draw ref="draw" :type="value" @drawend="finish"></my-map-draw>
    <my-map-placement style="padding: 10px;">
      <el-select v-model="value" size="small">
        <el-option
          v-for="item in types"
          :key="item"
          :label="item == 'Polygon' ? '矩形' : '⚪'"
          :value="item"
        >
        </el-option>
      </el-select>
    </my-map-placement>
  </my-map>
</template>
<script>
import { MyMap, MyMapPlacement, MyMapDraw, MyMapIcon } from "$ui/map";
import localInfo from "../model/getManyLocal";
import gisApi from '../../gisApi'
export default {
  data() {
    return {
      adapter({ TileLayer, XYZ }) {
        return new TileLayer({
          source: new XYZ({
            url: gisApi.layerConfig.tileUrl,
          }),
        });
      },
      theme: "",
      coordinates: [
        [12729061.664567024, 3568670.000910808],
        [12729008.158588907, 3568551.5234950976],
        [12728958.474403888, 3568444.5116846566],
        [12728908.790510453, 3568322.212410242],
        [12728836.175275264, 3568173.160219665],
        [12728771.203626271, 3568043.2171403673],
        [12728702.410475766, 3567913.274352654],
        [12728645.082704552, 3567783.331346252],
        [12728591.576726435, 3567668.6758038243],
        [12728522.783284346, 3567550.198468299],
        [12728476.921184007, 3567416.4336688],
        [12728419.593412794, 3567286.4906623987],
        [12728163.52930972, 3566300.452968361],
        [12728045.051974194, 3566300.452968361],
        [12727869.246867456, 3566323.3841643217],
        [12727693.441702401, 3566369.2464104514],
        [12727502.349073369, 3566407.464924594],
        [12727345.653223703, 3566411.286717691],
        [12727143.095098747, 3566407.464924594],
        [12726932.89312517, 3566422.7522427756],
      ],
       extent: gisApi.mapConfig.extent,
      center: gisApi.mapConfig.center,
      types: ["Polygon", "Circle"],
      value: "Polygon",
      locaList: [],
    };
  },
  methods: {
    clear() {
      this.$refs.draw.clear();
      this.locaList.forEach((item) => {
        item.color = "";
      });
    },
    finish(e) {
      var sum = 0;
      this.locaList.forEach((item) => {
        var geo = e.feature.getGeometry();
        var isIn = geo.intersectsCoordinate(item.geometry.coordinates);
        console.log(isIn);
        if (isIn) {
          item.color = "primary";
          sum++;
        }
      });
      alert("已选中" + sum);
      console.log(this.locaList);
      console.log(e);
    },
    manyLocal() {
      localInfo.getManyLocal().then((res) => {
        this.locaList = res.data.features;
      });
    },
  },
  mounted() {
    this.manyLocal();
  },
  components: {
    MyMap,
    MyMapPlacement,
    MyMapDraw,
    MyMapIcon,
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .my-map {
    height: 100% !important;
  }
}
</style>
